import './style.less'
import * as THREE from 'three';
import {EffectComposer} from 'three/examples/jsm/postprocessing/EffectComposer.js';
import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass.js';
import {OutlinePass} from 'three/examples/jsm/postprocessing/OutlinePass.js';
import{UnrealBloomPass} from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
import {RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { CSS3DSprite , CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';

const container = document.getElementById('app');

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 15);
camera.lookAt(0, 0, 0);


// // 正投影相机
// const width = window.innerWidth; //canvas画布宽度
// const height = window.innerHeight; //canvas画布高度
// const k = width / height; //canvas画布宽高比
// const s = 60;//控制left, right, top, bottom范围大小
// const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);


scene.add(camera);


const renderer = new THREE.WebGLRenderer({
    antialias: true
});   

renderer.setSize(window.innerWidth, window.innerHeight);          
    
container.appendChild(renderer.domElement); 

const axesHelper = new THREE.AxesHelper(2);
scene.add(axesHelper);

const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);


function animate() {   
    // controls.update();
    // renderer.render(scene, camera);
    composer.render();
    css3dRenderer.render(scene, camera);
    // 用法和webgl渲染器渲染方法类似
    css2Renderer.render(scene, camera);
    
    requestAnimationFrame(animate);
}


function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    // const width = window.innerWidth; //canvas画布宽度
    // const height = window.innerHeight; //canvas画布高度
    // // 2.1.更新相机参数
    // const k = width / height; //canvas画布宽高比
    // camera.left = -s*k;
    // camera.right = s*k;
    // // 2.2.相机的left, right, top, bottom属性变化了，通知threejs系统
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);

//创建光源
const ambientLight = new THREE.AmbientLight(0xffffff, 10);
scene.add(ambientLight);


//创建地面
const planeGeometry = new THREE.PlaneGeometry(100, 100);
const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide
});
planeGeometry.rotateX(- Math.PI / 2);
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
// plane.rotation.x = - Math.PI / 2;
scene.add(plane);

//ray
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();


function onDocumentMouseMove(event) {
    event.preventDefault();
    event.stopPropagation();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);
    // console.log(intersects);
    if (intersects.length > 0) {
        console.log(intersects[0]);
        // console.log('intersects');
        // let v1=intersects[0].point;

        // //可用1
        // let oPos=intersects[0].point;
        // let pos=intersects[0].point.clone();
        // // pos.sub(camera.position).normalize().multiplyScalar(10);
        // pos.sub(camera.position).multiplyScalar(0.5);

        // camera.position.add(pos);
        // controls.target.add(pos);
        // camera.lookAt(intersects[0].point);
        // // controls.update();

        //可用2
        let oPos=intersects[0].point;
        let pos=intersects[0].point.clone().addScalar(3);

        camera.position.set(pos.x, pos.y, pos.z);
        controls.target.set(oPos.x, oPos.y, oPos.z);
        camera.lookAt(oPos);
        controls.update();




        
    }
}

// document.addEventListener('click', onDocumentMouseMove, false);


 //相机控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);




function test2() {  
    document.addEventListener('click', function(event) {    
        console.log('test2');
        // geometry1.scale(1.1, 1.1, 1.1)

        // console.log(geometry1.scale);
        return;        
     });
     
 }
 
 test2();

 const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ 
    color: 0x00ffff
});


//创建一个空的几何体对象
const geometry2 = new THREE.BufferGeometry();
//类型化数组创建顶点数据
const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]); 
const attribue = new THREE.BufferAttribute(vertices, 3); 
geometry2.attributes.position = attribue;

// 点渲染模式
const material2 = new THREE.PointsMaterial({
    color: 0xffff00,
    size: 3 //点对象像素尺寸
}); 

const points = new THREE.Points(geometry2, material); //点模型对象
scene.add(points); //点模型添加到场景中



// 线材质对象
const material3 = new THREE.LineBasicMaterial({
    color: 0xff0000 //线条颜色
}); 
// 创建线模型对象
// const line3 = new THREE.Line(geometry, material);

// 闭合线条
// const line3 = new THREE.LineLoop(geometry, material); 
//非连续的线条
// const line3 = new THREE.LineSegments(geometry, material);
// scene.add(line3); //线模型添加到场景中



const cube = new THREE.Mesh(geometry, material);
scene.add(cube);


const geometry1 = new THREE.BoxGeometry(2, 2, 2);
//材质对象Material
const material1 = new THREE.MeshLambertMaterial({
    color: 0x00ffff, //设置材质颜色
    transparent: true,//开启透明
    opacity: 0.5,//设置透明度
});
for (let i = 0; i < 10; i++) {
    const mesh = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
    // 沿着x轴分布
    mesh.position.set(i*10,0,0);
    scene.add(mesh); //网格模型添加到场景中
}



document.getElementById('btnFullscreen').addEventListener('click', function(event) {
    console.log('click');
    event.preventDefault();
    event.stopPropagation();

});

// const div = document.getElementById('tag');
// // HTML元素转化为threejs的CSS2模型对象
// const tag = new CSS2DObject(div);
// tag.position.set(0,0,0);
// tag.scale.set(5,5,1);//缩放标签尺寸
// scene.add(tag); //CSS2模型对象添加到场景中
// 创建一个CSS2渲染器CSS2DRenderer
const css2Renderer = new CSS2DRenderer();
css2Renderer.setSize(window.innerWidth, window.innerHeight);
css2Renderer.domElement.style.position = 'absolute';
css2Renderer.domElement.style.top = '0px';
css2Renderer.domElement.style.pointerEvents = 'none'; //设置CSS2渲染器的事件监听为none，事件穿透到threejs渲染器

// renderer.render(scene, camera);
container.appendChild(css2Renderer.domElement); //CSS2渲染器添加到页面中

// const tag2 = document.getElementById('tag2');
// const sprite = new CSS3DSprite(tag2);
// tag2.style.pointerEvents = 'none';
// sprite.position.set(0,0,-2);
// // sprite.scale.set(5,5,1);//缩放标签尺寸
// scene.add(sprite); //CSS3D模型对象添加到场景中

const css3dRenderer = new CSS3DRenderer();
css3dRenderer.setSize(window.innerWidth, window.innerHeight);
css3dRenderer.domElement.style.position = 'absolute';
css3dRenderer.domElement.style.top = '0px';
css3dRenderer.domElement.style.pointerEvents = 'none'; //设置CSS3D渲染器的事件监听为none，事件穿透到threejs渲染器

// renderer.render(scene, camera);
container.appendChild(css3dRenderer.domElement); //CSS3D渲染器添加到页面中


//后期效果处理
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// //outlinePass
// const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
// outlinePass.edgeStrength = 10;
// // outlinePass.edgeGlow = 0.5;
// outlinePass.visibleEdgeColor.set(0xffff00); 
// outlinePass.pulsePeriod = 2;
// composer.addPass(outlinePass);

// outlinePass.selectedObjects = [cube]; //设置需要渲染的对象

// //UnrealBloomPass
// const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
// // effectUnrealBloom.renderToScreen = true;
// bloomPass.strength = 10;
// bloomPass.selectedObjects = [cube]; //设置需要渲染的对象
// composer.addPass(bloomPass);





// outlinePass.visibleEdgeColor.set(0xff0000); //设置渲染边缘的颜色


// const effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
// composer.addPass(effectFXAA);

// const effectBloom = new THREE.BloomPass(1.5, 25, 25, 256);
// composer.addPass(effectBloom);

// const effectFilm = new THREE.FilmPass(0.35, 0.025, 648, false);
// composer.addPass(effectFilm);



const geometry4 = new THREE.BoxGeometry(10, 10, 10);
const material4 = new THREE.MeshBasicMaterial({
    color: 0x00ffff,
});
const mesh = new THREE.Mesh(geometry4, material4);
scene.add(mesh);
const p = mesh.geometry.attributes.position;
const n = mesh.geometry.attributes.normal;
const count = p.count;//顶点数量
for (let i = 0; i < count; i++) {
    // 顶点位置O
    const O = new THREE.Vector3(p.getX(i), p.getY(i), p.getZ(i));
    // 顶点位置O对应的顶点法线
    const dir = new THREE.Vector3(n.getX(i), n.getY(i), n.getZ(i));
    // 箭头可视化顶点法线
    const arrowHelper = new THREE.ArrowHelper(dir, O, 2);
    mesh.add(arrowHelper);
}


animate();
